<template>
	<view>
		<header-box></header-box>
		<view class="content">
			<view class="top">
				<view class="flex-between">
					<view class="left">ID:彭博亿万富翁</view>
					<view class="right flex-center">会长</view>
				</view>
				<view class="link">
					<view class="title">推荐链接:</view>
					<view>{{url}}</view>
					<view class="copy-btn flex-center" @click="copy(url)">复制链接</view>
				</view>
			</view>
			<view class="card card1">
				<navigator url="/pages/user/withdraw" hover-class="none" class="btn flex-center">提现</navigator>
				<view class="title">可用余额</view>
				<view class="money flex">50,376,555.00 <text>VKD</text></view>
			</view>
			<view class="card card2">
				<navigator url="/pages/user/withdraw" hover-class="none" class="btn flex-center">提现</navigator>
				<view class="title">VDS数量</view>
				<view class="money flex">50,376,555.00 <text>VKD</text></view>
			</view>
			<view class="card card3">
				<view class="card-top flex-between">
					<view class="title">振金交易 V-KD     VDS</view>
					<view class="right flex">
						立即交易
						<image src="/static/slide-arrow.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="flex-between">
						<text>可兑换VDS：12345678</text>
						<text>兑换比例：95折</text>
					</view>
					<view class="flex-between">
						<text>全网VDS存量：1234567890</text>
						<text>RKD价格：1234</text>
					</view>
					
				</view>
			</view>
			<view class="list-card">
				<view class="list flex-between">
					<text>PRiDe盟友</text>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
				<view class="list flex-between">
					<text>收益详情</text>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
				<navigator url="/pages/user/grade" hover-class="none" class="list flex-between">
					<text>智能分级</text>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</navigator>
				<view class="list flex-between">
					<text>振金赛</text>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<footer-box tabIndex="2"/>
	</view>
</template>

<script>
	import HeaderBox from '@/components/headerBox.vue'
	import FooterBox from '@/components/footerBox.vue'
	import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		components:{
			HeaderBox,FooterBox
		},
		data() {
			return {
				url:"https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=%E8%8A%B1%E7%93%A3"
			};
		},
		methods:{
			copy(value){
				let content = value // 复制内容，必须字符串，数字需要转换为字符串
				const result = h5Copy(content)
				if (result === false) {
					 uni.showToast({
					   title:'不支持',
					 })
				} else {
					 uni.showToast({
					   title:'复制成功',
					   icon:'none'
					 })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding-bottom: 50rpx;
	}
	.top{
		padding: 30rpx 0;
		.left{
			font-size: 36rpx;
			color: #ffffff;
		}
		.right{
			width: 120rpx;
			height: 52rpx;
			background: url("/static/user-btn.png") no-repeat 0 0;
			background-size: 100% 100%;
			font-size: 32rpx;
			color: #ffffff;
		}
		.link{
			font-size: 24rpx;
			line-height: 36rpx;
			letter-spacing: 0rpx;
			color: #898ea3;
			margin-top: 15rpx;
			.copy-btn{
				float: right;
				width: 132rpx;
				height: 44rpx;
				border-radius: 22rpx;
				border: solid 2rpx #898ea3;
			}
		}
	}
	.card{
		height: 220rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		.btn{
			position: absolute;
			right:28rpx;
			top:30rpx;
			width: 110rpx;
			height: 53rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
		.title{
			font-size: 30rpx;
			color: #3df1be;
			margin: 40rpx 0 30rpx;
		}
		.money{
			font-size: 50rpx;
			color: #ffffff;
			text{
				font-size: 36rpx;
				margin-left: 10rpx;
				position: relative;
				top:4rpx;
			}
		}
	}
	.card1{
		background: url("/static/user-card1.png") no-repeat 0 0;
		margin-top: 60rpx;
		background-size: 100% 100%;
	}
	.card2{
		background: url("/static/user-card2.png") no-repeat 0 0;
		background-size: 100% 100%;
	}
	.card3{
		background: url("/static/user-card3.png") no-repeat 0 0;
		background-size: 100% 100%;
		.card-top{
			height: 80rpx;
			border-bottom: 2rpx solid rgba(255,255,255,.2);
			.right{
				font-size: 30rpx;
				color: #898ea3;
				image{
					width: 13rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
		.bottom{
			padding: 18rpx 0;
			view{
				font-size: 26rpx;
				color: #898ea3;
				line-height: 2;
			}
		}
	}
	.list-card{
		background-color: #262d3c;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 0 30rpx;
		.list{
			line-height: 3;
			font-size: 28rpx;
			color: #898ea3;
			border-bottom: 2rpx solid  rgba(255,255,255,.1);
			&:last-child{
				border: 0;
			}
			image{
				width: 20rpx;
				height: auto;
			}
		}
	}
</style>
